<template>
  <app-bar
    v-if="!headless"
    :border="border"
    :z-index="zIndex"
  >
    <template #left>
      <slot name="left">
        <span v-if="!leftArrow"></span>
        <template v-else>
          <i class="iconfont icon-watt-arrow-left m-nav-arrow" @click="back" />
          <span v-if="leftText" @click="back">{{ leftText }}</span>
        </template>
      </slot>
    </template>
    <template #title>
      <slot name="title">
        <span class="m-nav-title">{{ title }}</span>
      </slot>
    </template>
    <template #right>
      <slot name="right" @click="handleRight">
        <span>{{ rightText }}</span>
      </slot>
    </template>
  </app-bar>
</template>
<script>
import { defineComponent, toRefs } from 'vue'
import { isWeChat, isDingTalk, isQQ } from '@/utils/app'
import AppBar from './appBar.vue'
export default defineComponent({
  name: 'MTopbar',
  components: { AppBar },
  props: {
    title: {
      type: String,
    },
    leftText: {
      type: String,
    },
    rightText: {
      type: String,
    },
    leftArrow: {
      type: Boolean,
      default: true,
    },
    leftClick: {
      type: Boolean,
    },
    border: {
      type: Boolean,
    },
    zIndex: {
      type: [Number, String],
    },
  },
  emits: ['click-left', 'click-right', 'close'],
  setup (props, { emit }) {
    const { title, leftText, rightText, leftArrow, leftClick, border, zIndex } = toRefs(props)
    const back = () => {
      if (leftClick.value) emit('click-left')
      else window.history.go(-1)
    }
    const handleRight = () => {
      emit('click-right')
    }
    // 无头显示
    const headless = ref(isWeChat() || isDingTalk() || isQQ())
    return {
      title,
      leftText,
      rightText,
      leftArrow,
      leftClick,
      border,
      zIndex,
      headless,
      back,
      handleRight
    }
  },
})
</script>
<style lang="less" scoped>
.van-nav-bar {
  background-color: unset;
}
.m-nav-title,
.m-nav-arrow {
  font-weight: 500;
  color: #333;
  font-size: 25px;
}
.m-nav-title {
  font-size: 17px;
  text-transform: capitalize;
}
</style>
